<template>
	<div style="display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;">
		<div style="margin-bottom: 8px;">
			<button @click="onAdd">增加动画</button>
			<button @click="onDel">取消动画</button>
		</div>
		<div style="width:300px;height:500px;border:3px solid #e0e0e0;">
			<auto-scroll :stepSpeed="3500">
				<div v-for="index in _count" class="red" :key="index" style="font-size:24px;text-align:center;padding:10px 0;box-shadow: 0px 0px 3px 2px blue;">{{index}}</div>
			</auto-scroll>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import AutoScroll from '@/components/AutoScroll.vue'

const instance = getCurrentInstance()

const _count = ref(20)

const onAdd = function(){
	//instance.refs.scroll.drawAnimate()
}

const onDel = function(){
	//instance.refs.scroll.destoryAnimate()
}
</script>

<style>
</style>